<template>
	<view class="multiuser-guide p-2" :style="{ paddingTop: safeAreaTop + 'px' }">
		<view class="guide-content" v-if="tabIndex==0">
			<view class="title">
				BG5：商业与团队的能量运作
			</view>
			<text>BG5（Business&nbsp;&amp;&nbsp;Career&nbsp;Design）是人类图在人际协作、事业发展和团队管理中的应用。它将个人的能量类型、决策模式、沟通风格、资源管理能力等因素结合，帮助优化团队分工、合作效率和职业发展。</text>
			<view class="flex-r s-b a-c mt-1">
				<view class="tag">
					团队分工
				</view>
				<view class="tag">
					团队沟通方式
				</view>
			</view>
			<view class="flex-r s-b a-c mt-1">
				<view class="tag">
					资源管理与财务风格
				</view>
				<view class="tag">
					决策模式
				</view>
			</view>
			<view class="flex-r s-b a-c mt-1">
				<view class="tag">
					团队挑战与解决方案
				</view>
				<view class="tag">
					结论与优化方向
				</view>
			</view>
			<view class="video flex-c a-c j-c">
				<text class="iconfont icon-shipinbofang mb-1" />
				观看视频了解更多
			</view>
			<view class="example flex-r a-c j-c">
				查看示例 <text class="iconfont icon-zuozuo" />
			</view>
		</view>
		<view class="guide-content guide-content2" v-else-if="tabIndex==1">
			<view class="title">
				家庭 Penta 的主要作用
			</view>
			<text>在家庭&nbsp;Penta中，Penta&nbsp;影响的是家庭成员之间的沟通方式、角色分工、决策模式、情绪互动等，从而决定了家庭的整体运作是否顺畅。提升家庭和谐度，优化家庭决策方式，提高家庭运作效率，增强家庭幸福感。</text>
			<view class="flex-r s-b a-c mt-1">
				<view class="tag">
					家庭角色分工
				</view>
				<view class="tag">
					家庭的决策模式
				</view>
			</view>
			<view class="flex-r s-b a-c mt-1">
				<view class="tag">
					家庭的沟通方式
				</view>
				<view class="tag">
					家庭的情绪能量和氛围
				</view>
			</view>
			<view class="flex-r s-b a-c mt-1">
				<view class="tag tag2">
					影响家庭对资源（财务、时间、精力）的管理
				</view>
			</view>
			<view class="video flex-c a-c j-c">
				<text class="iconfont icon-shipinbofang mb-1" />
				观看视频了解更多
			</view>
			<view class="example flex-r a-c j-c">
				查看示例 <text class="iconfont icon-zuozuo" />
			</view>
		</view>

		<button class="button-active mt-3">+ 新增合图</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	const props = defineProps({
		tabIndex: {
			type: Number,
			default: 0
		}
	})
	const safeAreaTop = uni.$safeArea?.safeAreaTop || 44;
</script>

<style lang="scss" scoped>
	.multiuser-guide {
		.guide-content {
			background: linear-gradient(180deg, #C8DDFF 0%, #FAECFF 100%);
			border-radius: 20rpx;
			padding: 40rpx 30rpx;

			.title {
				font-weight: 500;
				font-size: 40rpx;
				color: #091F3E;
				text-align: center;
				margin-top: 80rpx;
				margin-bottom: 40rpx;
			}

			text {
				font-size: 24rpx;
				line-height: 44rpx;
				color: #4D4D4D;
			}

			.tag {
				width: 294rpx;
				font-size: 28rpx;
				color: #24348E;
				background: #97BDFF;
				border-radius: 8rpx;
				padding: 16rpx 0;
				text-align: center;
			}

			.video {
				font-size: 26rpx;
				color: #6F6F6F;
				margin-top: 100rpx;

				i {
					font-size: 60rpx;
				}
			}

			.example {
				font-weight: 500;
				font-size: 28rpx;
				color: #797979;
				margin-top: 100rpx;
				margin-bottom: 40rpx;
			}
		}

		.guide-content2 {
			background: linear-gradient(180deg, #FFE6DD 0%, #FEF5EF 100%);

			.tag {
				color: #fff;
				background: #FC9263;
			}

			.tag2 {
				width: 100%;
			}
		}
	}
</style>